<ui:composition template="index.xhtml" 
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core" >

	<ui:define name="content">
		<h:form id="reg">
			<h2>#{strings['addTopic.headline']}</h2>
			<h:panelGrid columns="3" columnClasses="titleCell">
				<h:outputLabel for="title" value="Titel" />
				<h:inputText id="title" value="#{newTopic.title}" />
				<h:message for="title" errorClass="text-error" />
				
				<h:outputLabel for="description" value="Beschreibung" />
				<h:inputTextarea id="description" value="#{newTopic.description}" />
				<h:message for="description" errorClass="text-error" />
				
				<h:outputLabel for="icon" value="Icon" />
				<p:selectOneListbox id="icon" value="#{newTopic.icon}" converter="#{iconConverter}" var="i" style="height:200px;width:40px">  
					<f:selectItems value="#{iconBean.icons}" var="icon" itemLabel="#{icon.id}" itemValue="#{icon}"/>  
  					<p:column>  
						<p:graphicImage value="img/icons/#{i.fileName}" width="40px"/>  
					</p:column>  
				</p:selectOneListbox> 
				<h:message for="icon" errorClass="text-error" />
			</h:panelGrid>

			<div>
				<h:panelGrid columns="3">
					<input type="reset" value="#{strings['button.reset']}" class="register btn btn-default" />
					<h:commandButton id="register" action="#{topicController.register}"
						value="#{strings['addTopic.submit']}" styleClass="register btn btn-primary" />
					<div>
						<h:messages errorClass="text-error" infoClass="text-info" warnClass="text-warning" />
					</div>
				</h:panelGrid>
			</div>
		</h:form>
	</ui:define>
</ui:composition>